<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/aidTool/examination' }"> <i class="el-icon-lx-cascades"></i> 试卷列表 </el-breadcrumb-item>
                <el-breadcrumb-item>[{{ this.$route.query.title }}] 试题管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="paper-section">
            <div class="data-block">
                <div class="item total">总分：{{ customData.total }} <span>分</span></div>
                <div class="item pass">及格：{{ customData.pass }} <span>分</span></div>
                <div class="item exam-time">作答时间：{{ customData.exam_time }} <span>分钟</span></div>
            </div>
            <div class="data-block margin-bottom">
                <div class="item type-1-count">
                    <span>（单选题）</span> <span>共 {{ customData.type_1_count }} 道</span>
                    <span style="color: red">共 {{ customData.total_setting.type_1 }} 分</span>
                    <span>每题 {{ customData.type_1_count == 0 ? 0 : customData.total_setting.type_1 / customData.type_1_count }} 分</span>
                </div>
                <div class="item type-1-count">
                    <span>（多选题）</span> <span>共 {{ customData.type_2_count }} 道</span>
                    <span style="color: red">共 {{ customData.total_setting.type_2 }} 分</span>
                    <span>每题 {{ customData.type_2_count == 0 ? 0 : customData.total_setting.type_2 / customData.type_2_count }} 分</span>
                </div>
                <div class="item type-1-count">
                    <span>（判断题）</span> <span>共 {{ customData.type_3_count }} 道</span>
                    <span style="color: red">共 {{ customData.total_setting.type_3 }} 分</span>
                    <span>每题 {{ customData.type_3_count == 0 ? 0 : customData.total_setting.type_3 / customData.type_3_count }} 分</span>
                </div>
				
				<div class="item type-1-count">
				    <span>（填空题）</span> <span>共 {{ customData.type_4_count }} 道</span>
				    <span style="color: red">共 {{ customData.total_setting.type_4 }} 分</span>
				    <span>每题 {{ customData.type_4_count == 0 ? 0 : customData.total_setting.type_4 / customData.type_4_count }} 分</span>
				</div>
				
                <div class="item total">共计：{{ pageTotal }} <span>道</span></div>
                <el-button @click="customDialog" type="success" round style="margin-left: 20px">自定义分配分值</el-button>
            </div>
        </div>
        <div class="container">
            <el-button type="primary" class="handle-del mr10" @click="addDialog" style="margin-bottom: 20px">添加试题</el-button>
            <!-- <div class="handle-box">
                <el-input v-model="query.keyword" placeholder="输入试题名称" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div> -->
            <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="question" label="试题名称"></el-table-column>
                <el-table-column label="所属题库">{{ this.$route.query.title }}</el-table-column>
                <el-table-column label="题型">
                    <template slot-scope="scope">
                        <!-- {{ scope.row.type == '1' ? '单选题' : scope.row.type == '2' ? '多选题' : '判断题' }} -->
						{{ scope.row.type == 1 ? '单选题' : scope.row.type == 2 ? '多选题' : scope.row.type == 3 ? '判断题' : scope.row.type == 4 ? '填空题' : scope.row.type == 5 ? '问答题' : '材料题'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-row>
                            <el-button @click="deleteRow(scope.row.id, scope.$index)" type="danger" size="mini">移出试题</el-button>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.rows"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 自定义分配分值弹出框  -->
        <el-dialog title="自定义分配分值" @close="custom_cancel" :visible.sync="customDialogVisible" width="40%" center>
            <el-alert
                title="注：不设置分数将平均分配，请注意总分和试题数量设置，避免因无法整除导致每题分数出现无限循环小数"
                type="warning"
                effect="dark"
            >
            </el-alert>
            <div class="setting-content">
                <div class="info">
                    <div class="num">共计：{{ pageTotal }} <span>道题</span></div>
                    <div class="total">总分：{{ customData.total }} <span>分</span></div>
                </div>
                <div class="item type-1-count">
                    <div class="count">单选题：{{ customData.type_1_count }} <span>道</span></div>
                    <div class="setting">
                        <span class="font">共</span>
                        <el-input-number
                            v-model="custom_point.total_setting.type_1"
                            size="mini"
                            controls-position="right"
                            :min="0"
                            :max="100"
                        ></el-input-number>
                        <span class="font">分</span>
                    </div>
                </div>
                <div class="item type-1-count">
                    <div class="count">多选题：{{ customData.type_2_count }} <span>道</span></div>
                    <div class="setting">
                        <span class="font">共</span>
                        <el-input-number
                            v-model="custom_point.total_setting.type_2"
                            size="mini"
                            controls-position="right"
                            :min="0"
                            :max="100"
                        ></el-input-number>
                        <span class="font">分</span>
                    </div>
                </div>
                <div class="item type-1-count">
                    <div class="count">判断题：{{ customData.type_3_count }} <span>道</span></div>
                    <div class="setting">
                        <span class="font">共</span>
                        <el-input-number
                            v-model="custom_point.total_setting.type_3"
                            size="mini"
                            controls-position="right"
                            :min="0"
                            :max="100"
                        ></el-input-number>
                        <span class="font">分</span>
                    </div>
                </div>
				
				<div class="item type-1-count">
				    <div class="count">填空题：{{ customData.type_4_count }} <span>道</span></div>
				    <div class="setting">
				        <span class="font">共</span>
				        <el-input-number
				            v-model="custom_point.total_setting.type_4"
				            size="mini"
				            controls-position="right"
				            :min="0"
				            :max="100"
				        ></el-input-number>
				        <span class="font">分</span>
				    </div>
				</div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="custom_cancel">取 消</el-button>
                <el-button type="primary" @click="custom_save">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加试题弹出框 -->
        <el-dialog title="添加试题" @close="cancel" :visible.sync="showDialog" width="50%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item>
                    <el-select v-model="addColumn.type" style="margin-right: 20px">
                        <el-option v-for="item in courseType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                    <el-input v-model="addColumn.keyword" placeholder="输入题目" class="handle-input mr10"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="addColumnSearch">搜索</el-button>
                </el-form-item>
                <el-table
                    :data="columnTableData"
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column prop="question" label="题目"></el-table-column>
                    <el-table-column prop="type" label="题型">
                        <template slot-scope="scope">
                            {{ scope.row.type == 1 ? '单选题' : scope.row.type == 2 ? '多选题' : scope.row.type == 3 ? '判断题' : scope.row.type == 4 ? '填空题' : scope.row.type == 5 ? '问答题' : '材料题'}}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="addColumn.page"
                        :page-size="addColumn.rows"
                        :total="columnPageTotal"
                        @current-change="columnPageChange"
                    ></el-pagination>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import merge from 'webpack-merge';
import { examManageListData, addExamData, questionListData, examManageData } from '../../api/index';
export default {
    // name: 'columnManage',
    data() {
        return {
            query: {
                paper_id: '',
                page: 1,
                rows: 10,
                keyword: ''
            },
            imgUrl: 'http://api.xuejing.pro/admin/file/image',
            pictureList: [],
            type: '',
            courseType: [
                {
                    value: '',
                    label: '全部类型'
                },
                {
                    value: '1',
                    label: '单选题'
                },
                {
                    value: '2',
                    label: '多选题'
                },
                {
                    value: '3',
                    label: '判断题'
                },
                {
                    value: '4',
                    label: '填空题'
                },
                {
                    value: '5',
                    label: '问答题'
                },
                {
                    value: '6',
                    label: '材料题'
                },
            ],

            form: {
                type: 'column',
                id: '',
                title: '',
                description: '',
                cover: '',
                category_id: '',
                only_member: '',
                alone_sale: '',
                expense: '',
                price: '',
                marking_price: '',
                score: '',
                f_view: '',
                f_sales: '',
                f_favorites: '',
                sort: '',
                status: ''
            },
            addColumn: {
                paper_id: '',
                type: '',
                page: 1,
                rows: 10,
                keyword: '',
            },
            options: [],
            // options_child: [],
            customData: {
                total_setting: {
                    type_1: 0,
                    type_2: 0,
                    type_3: 0,
					type_4: 0,
                }
            },
            custom_point: {
                id: '',
                total_setting: {
                    type_1: 0,
                    type_2: 0,
                    type_3: 0
                }
            },
            tableData: [],
            columnTableData: [],
            multipleSelection: '',
            delList: [],
            customDialogVisible: false,
            showDialog: false,
            pageTotal: 0,
            columnPageTotal: 0
        };
    },
    created() {
        this.query.paper_id = this.addColumn.paper_id = this.custom_point.id = this.$route.query.id;
        this.getData();
    },
    methods: {
        getData() {
            examManageListData(this.query).then((res) => {
                this.tableData = res.data.list;
                this.pageTotal = res.data.count;
                this.customData = res.data.info;
                this.total_setting = res.data.info.total_setting;
                this.custom_point.total_setting.type_1 = res.data.info.total_setting.type_1;
                this.custom_point.total_setting.type_2 = res.data.info.total_setting.type_2;
                this.custom_point.total_setting.type_3 = res.data.info.total_setting.type_3;
				this.custom_point.total_setting.type_4 = res.data.info.total_setting.type_4;
            });
        },
        // 多选操作
        handleSelectionChange(val) {
            let knowledge_ids = [];
            val.forEach((item) => {
                knowledge_ids.push(item.id);
                this.multipleSelection = knowledge_ids.join(',');
            });
        },
        // 搜索
        handleSearch() {
            this.$set(this.query);
            this.getData();
        },
        //自定义分配分值
        customDialog() {
            this.customDialogVisible = true;
        },
        custom_save() {
            addExamData(this.custom_point).then((res) => {
                if (res.code == 1) {
                        this.$message.success('自定义分值成功');
                        this.customDialogVisible = false;
                        this.getData();
                    }
            });
        },
        custom_cancel() {
            this.customDialogVisible = false;
        },
        //添加试题
        addDialog() {
            this.showDialog = true;
            this.getquestionListData();
        },
        getquestionListData(){
            questionListData(this.addColumn).then((res) => {
                //console.log(res);return;
                this.columnTableData = res.data.list;
                this.columnPageTotal = res.data.count;
            });
        },
        addColumnSearch() {
            questionListData(this.addColumn).then((res) => {
                this.columnTableData = res.data.list;
                this.columnPageTotal = res.data.count;
            });
        },
        //编辑
        edit(id, row) {
            classifyListData().then((res) => {
                this.options = res.data.list;
            }); 
            this.showDialog = true;
            this.form = row;
            this.form.id = id;
            if (row.cover) {
                this.pictureList.push({
                    url: row.cover
                });
            }
        },
        //上下架
        putOn(id, status) {
            this.$confirm(`确定${status == 0 ? '上架' : '下架'}吗！`, '提示', {
                type: 'warning'
            }).then(() => {
                addVideoData({ id: id, status: status == 0 ? 1 : 0 }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('成功');
                        location.reload();
                    }
                });
            });
        },
        //移出试题
        deleteRow(id, index) {
            // 二次确认删除
            this.$confirm('确定要移出吗？', '提示', {
                type: 'warning'
            }).then(() => {
                examManageData({ type: 'del', paper_id: this.$route.query.id, question_id: id }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('移出成功');
                        this.tableData.splice(index, 1);
                        this.getData();
                    }
                });
            });
        },
        //取消
        cancel() {
            this.pictureList = [];
            this.showDialog = false;
            // location.reload();
        },
        //确定
        save() {
            this.$confirm('确定要添加吗？', '提示', {
                type: 'warning'
            }).then(() => {
                examManageData({ type: 'add', paper_id: this.$route.query.id, question_ids: this.multipleSelection }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('添加成功');
                        this.customDialogVisible = false;
                        // setTimeout(() => {
                        //     location.reload();
                        // }, 200);
                        this.showDialog = false;
                        this.getData();
                    }
                });
            });
        },
        // 分页
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        },
        //添加试题分页
        columnPageChange(val) {
            this.$set(this.addColumn, 'page', val);
            this.getquestionListData();
        }
    }
};
</script>

<style scoped>
.paper-section {
    margin: 20px 0;
}
.paper-section .data-block {
    padding: 5px 0;
}
.paper-section .data-block .item:first-child {
    margin-left: 0;
}
.paper-section .data-block .item {
    display: inline-block;
    line-height: 28px;
    text-align: center;
    font-size: 13px;
    background-color: #fff;
    border-radius: 5px;
    margin: 0 5px;
    padding: 5px 20px;
}
.setting-content .info {
    font-size: 16px;
    text-align: center;
}
.setting-content .info .num,
.setting-content .info .total {
    display: inline-block;
    line-height: 38px;
    margin: 10px;
}
.setting-content .item .count {
    display: inline-block;
    line-height: 38px;
    width: 290px;
    text-align: right;
    padding-right: 10px;
}
.setting-content .item .setting {
    display: inline-block;
    line-height: 38px;
    width: 200px;
}
.setting-content .item .setting .font {
    display: inline-block;
    padding: 0 5px;
}
.handle-box {
    margin-bottom: 20px;
    float: right;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}

.info-image {
    height: 64px;
    width: 80px;
    border-radius: 4px;
}
.showPay {
    width: 150px;
    margin-right: 10px;
    margin-bottom: 15px;
}
</style>

<style>
.el-upload--text {
    border: 0;
    height: 40px;
    text-align: left;
    overflow: unset;
}
.el-upload__tip {
    margin-top: 0;
}
</style>


